<template>
  <n-config-provider id="body w-full" :theme-overrides="naiveTheme">
    <module-header name="app" value="/doctor" is-telescreen />
    <n-modal v-model:show="show" preset="dialog" title="确认" content="你确认?"
             positive-text="确认" negative-text="再看看"
             @positive-click="updateInfo" @negative-click="cancelCallback"
    />
    <main-content>
      <n-card class="w-3/5 overflow-auto relative"
        style="box-shadow:  0 0 4px 0 rgba(0, 0, 0, 0.5);" title="个人信息" :segmented="{
        content: true,
        footer: 'soft'
      }"
      >
        <template #header-extra class="fixed top-0 left-0 right-0">
          <n-button v-show="type === 'READ'" type="primary" @click="type = 'MODIFY'">
            去修改
          </n-button>
        </template>
        <div class="flex flex-wrap ">
          <div v-for="(value, key) in labels" :key="key" class="w-1/2 px-4 py-3">
            <label> {{ labels[key] }}:</label>
            <n-input v-model:value="user[key]" :label="labels[key]"
                    :disabled="type === 'READ' || bans.findIndex(banKey => banKey === key) != -1"
                    :placeholder="'请输入'+labels[key]" :type="key === 'password' ? 'password' : undefined"
                    show-password-on="click"
            >
              <template #password-visible-icon>
                <n-icon :size="16" :component="GlassesOutline" />
              </template>
            </n-input>
          </div>

          <div class="w-full flex flex-wrap">
            <n-h3 class="w-full">擅长的项目:</n-h3>
            <div v-for="(value,key) in items" :key="key">
              <n-card :title="value.iname" class="border-solid border-green-400 rounded-md">
                <div>
                  项目名 {{ value.iname }}
                </div>
                <div>
                  推荐用时{{ value.finishTime }}分钟
                </div>
              </n-card>
            </div>
          </div>
        </div>
        <template #footer>
          <div class="flex justify-center gap-4">
            <n-button v-show="type === 'MODIFY'" type="primary" @click="drawback">
              取消修改
            </n-button>
            <n-button v-show="type === 'MODIFY'" type="primary" @click="show = true">
              提交修改
            </n-button>
          </div>
        </template>
      </n-card>
    </main-content>
  </n-config-provider>
</template>
<script setup lang="ts">
import { NInput, NConfigProvider, NIcon, NButton, NCard, NModal, NH3 } from 'naive-ui'
import { naiveTheme } from '../../shared/theme/naive_theme'
import ModuleHeader from '../../components/common/module_header.vue'
import MainContent from '../../components/common/main_content.vue'
import { ref, reactive, onMounted, toRaw } from 'vue'
import { Ddetail, reqGetInfo, reqUpdateInfo } from './doctor.def'
import { axiosReq } from '../../shared/client/axios'
import { cloneDeep } from 'lodash'
import { GlassesOutline } from '@vicons/ionicons5'
import { actErr, actOK } from '../../shared/client/interact'
const type = ref<'READ' | 'MODIFY'>('MODIFY')
const show = ref(false)
const labels = reactive({
  uId: '用户ID',
  dId: '职工号',
  name: '姓名',
  gender: '性别',
  cardId: '身份证号码',
  password: '密码',
  birthday: '出生日期',
  phone: '手机号',
  homeAddress: '家庭住址',
})
const bans = ['name','uId','dId','gender']
let items = reactive<any>([])
let user = reactive<Ddetail>({
  uId: '',
  dId: '',
  password: '',
  name: '',
  gender: '',
  cardId: '',
  birthday: '',
  phone: '',
  homeAddress: '',
})
let backup: any = null
function changeType(target: any,origin: any){
  target.uId = origin.uid.toString()
  target.dId = origin.did.toString()
  target.birthday = origin.birthday.split('T')[0].replaceAll('-','/')
}
onMounted(async() => {
  if(!import.meta.env.SSR) {
    const data = await reqGetInfo(axiosReq)
    user = reactive(data.data.doctor)
    backup = cloneDeep(data.data.doctor)
    changeType(user,data.data.doctor)
    if(!user.gender) {
      user.gender = '男'
    }else {
      user.gender = '女'
    }
    items = data.data.item
    type.value = 'READ'
  }
})

async function updateInfo() {
  const data= await reqUpdateInfo(axiosReq,user)
  console.log(data)
  if(data.code == 200){
    actOK('修改成功')
  }else{
    actErr('修改失败')
  }
  backup = cloneDeep(toRaw(user))
  type.value = 'READ'
}
function drawback() {
  user = reactive(cloneDeep(backup))
  changeType(user,backup)
  type.value = 'READ'
}
function cancelCallback() {
  show.value = false
}
</script>
<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
